<template>
  <div
    id="app"
    class="app-wrapper"
  >
    <WordCloud />
  </div>
</template>

<script>
import WordCloud from '@/views/WordCloud8';

export default {
  data: () => ({}),
  components: { WordCloud },
};
</script>

<style lang="less" scoped>
#app {
  /* 引入背景图（本地图片用路径，在线图片用URL） */
  background-image: url("./assets/dmbg.png");
  /* 关键：背景图不重复（避免平铺错乱） */
  background-repeat: no-repeat;
  /* 关键：背景图覆盖整个容器（保持完整性） */
  background-size: cover;
  /* 关键：背景图固定位置（滚动页面时不偏移） */
  background-attachment: fixed;
  /* 背景图居中显示（视觉更协调） */
  background-position: center center;
  /* 可选：加半透明遮罩（避免背景过亮遮挡文字） */
  background-color: rgba(255, 255, 255, 0.9); /* 白色底+90%透明度 */
  background-blend-mode: overlay; /* 背景图与底色混合，降低对比度 */
}
.app-wrapper {
  display: flex;
  .app-menus {
    flex: 0 0 220px;
  }

  .app-view {
    flex: 1;
    margin: 0 auto;
  }
}
</style>
